<template>
  <div>
    <transition name="fade">
      <keep-alive>
        <router-view class="content"></router-view>
      </keep-alive>
    </transition>
    <tabbar class="tabbar">
      <tabbar-item link="/app" selected>
        <icon slot="icon" name="home" :scale="2.4"></icon>
        <span slot="label">应用</span>
      </tabbar-item>
      <tabbar-item link="/contacts">
        <icon slot="icon" name="message" :scale="2.4"></icon>
        <span slot="label">通讯录</span>
      </tabbar-item>
      <tabbar-item link="/settings">
        <icon slot="icon" name="person" :scale="2.4"></icon>
        <span slot="label">设置</span>
      </tabbar-item>
    </tabbar>
  </div>
</template>

<script>
  import { Tabbar, TabbarItem } from 'vux'
  import { mapGetters } from 'vuex'

  export default {
    data(){
      return {}
    },
    components: {
      Tabbar,
      TabbarItem
    },
    computed: {
      ...mapGetters([
        'transitionName'
      ])
    }
  }
</script>

<style lang="less" scoped>
  .active{
    color: #23377e;
  }
  .tabbar{
    height: 53px;
    overflow: hidden;
  }
  .content{
    position: absolute;
    width: 100%;
    top: 0;
    bottom: 53px;
    overflow: hidden;
  }
  .fade-enter-active, .fade-leave-active{
    transition: opacity 0.1s;
  }
  .fade-enter, .fade-leave-to{
    opacity: 0;
  }
</style>
